<template>
  <div class="w-full grid grid-cols-3 grid-row-1 px-10px py-20px rounded-5px">
    <div class="col-span-2 grid grid-rows-3">
      <img src="@/assets/image/gx317.jpg" class="row-span-2 rounded-tl-7px w-full h-30vw" />
      <div class="w-full grid grid-cols-2 row-span-1">
        <div
          class="w-full bg-contact bg-cover bg-center rounded-bl-7px flex flex-col flex-center text-0.8em h-15vw"
          @click="onNav('/joinus')"
        >
          <span class="mb-0.8em font-bold text-primary">RCEP</span>
          <span class="font-bold text-[#007185]">代理商入口</span>
        </div>
        <el-image
          src="https://cdn.yupaowang.com/yupao_pc/images/zddq/home/banner_gdjg.png"
          :fit="'fill'"
          class="h-15vw"
        />
      </div>
    </div>
    <div class="col-span-1 row-span-1">
      <img
        src="https://cdn.yupaowang.com/yupao_pc/images/zddq/common/cz_home_v2.png"
        class="h-45vw w-full"
      />
    </div>
  </div>
  <div class="px-10px relative bg-grayscaleBg">
    <div class="absolute right-10px top-1em z-9 w-20px h-20px" @click="drawer = true">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16 ">
        <path
          fill="currentColor"
          fill-rule="evenodd"
          d="M8.5 1h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1m0 4h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1m0 4h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1m0 4h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1M3.85 4.15l3 3l.038.042l.042.062l.029.059l.02.063l.012.055l.005.073l-.002.053l-.014.075l-.021.063l-.04.076l-.04.055l-3.03 3.03a.5.5 0 0 1-.707-.707l2.15-2.15H.502a.5.5 0 0 1 0-1h4.79l-2.15-2.15a.5.5 0 0 1-.058-.638l.058-.07a.5.5 0 0 1 .707 0z"
          clip-rule="evenodd"
        />
      </svg>
    </div>
    <el-tabs v-model="activeName" class="" @tab-click="handleClick">
      <el-tab-pane label="国际招聘" name="job" v-loading="jobLoading">
        <div class="mb-10px shadow-box border" v-for="item in jobList" :key="item.id">
          <div class="w-full bg-gradient-to-r from-white to-[#ffc3c0] flex px-8px py-10px relative">
            <div class="flex items-center w-full" @click="toPath('/company?id=' + item.id)">
              <el-image class="w-50px h-50px mr-8px" :src="item.logoImage" />
              <div class="one-row-ellipsis text-16px font-bold w-7/10">
                {{ item.companyName }}
              </div>
              <div class="absolute top-0px right-0px">
                <CountryIcon :countryId="item.countryId" />
              </div>
            </div>
          </div>
          <div
            class="flex flex-center flex-col bg-white py-10px border-t px-10px"
            v-for="node in item.jobList"
            :key="item.id"
            @click="toPath('/job?id=' + node.id)"
          >
            <div class="grid grid-col-5 w-full mb-8px text-16px">
              <div class="col-span-2 font-bold mb-8px">{{ node.jobName }}</div>
              <div class="col-span-2 text-price_red" v-if="node.salaryMin || node.salaryMax">
                <span v-if="node.salaryMin">{{ formatPrice(node.salaryMin) }}</span>
                <span v-if="node.salaryMin && node.salaryMax">-</span>
                <span v-if="node.salaryMax">{{ formatPrice(node.salaryMax) }}</span>
                <span>{{ getCurrency(node.currency)?.name }}</span>
              </div>
              <div class="text-price_red" v-else>面议</div>
            </div>
            <div class="flex items-center justify-between w-full mb-8px">
              <span class="text-16px">
                工作地点:
                <span v-show="node.countryName">{{ node.countryName }}</span>
                <span v-show="node.countryName && node.cityName">-</span>
                <span v-show="node.cityName">{{ node.cityName }}</span>
              </span>
              <span class="text-[14px] text-[#6c757d]">{{ formatShortDate(node.updateDate) }}</span>
            </div>
            <div class="w-full one-row-ellipsis text-16px">
              <span>{{ '招聘范围：' }}</span>
              <CountryIcon :countryId="node.countryScope" />
            </div>
            <div class="w-full flex justify-center mt-10px">
              <div class="border border-primary px-10px py-5px rounded-5px text-16px">
                查看并翻译
              </div>
            </div>
          </div>
          <div class="flex flex-center bg-white py-10px border-t">
            <div class="border border-primary px-20px py-10px rounded-5px text-16px">
              查看更多职位
            </div>
          </div>
        </div>

        <el-empty :description="'暂无查询数据'" v-if="jobList.length == 0" />
      </el-tab-pane>
      <el-tab-pane label="最新简历" name="vita">
        <div class="min-h-100vh pb-10px text-16px" v-loading="vitaLoading">
          <div
            class="flex flex-col w-full border rounded-5px mb-10px shadow-box relative"
            v-for="item in vitaList"
            :key="item.id"
            @click="toPath('/vita?id=' + item.id)"
          >
            <div class="absolute z-9 right-0px top-0px">
              <CountryIcon :countryId="item.memberCountryId" />
            </div>
            <div class="flex px-10px pt-20px items-center">
              <el-image
                class="w-60px h-60px"
                :src="
                  item.image
                    ? item.image
                    : item.sex === 1
                      ? 'https://static108.cdqlkj.cn/r/5180/108/pb/p/20240104/1117d007f7a84f4eb22f5beadf50d4e4.png'
                      : 'https://static108.cdqlkj.cn/r/0fdc/108/pb/p/20240104/ba5c8376c570488fb4d804af1e17ed80.png'
                "
              />
              <div class="flex flex-col ml-10px">
                <span class="text-16px font-bold">{{ item.name }}</span>
                <span class="text-grayscaleText mt-8px text-16px">
                  <span>{{ item.sex === 1 ? '男' : '女' }}</span>
                  <span class="mx-3px">·</span>
                  <span>{{ item.age }}周岁</span>
                  <span class="mx-3px">·</span>
                  <span>{{
                    config.getGZJYCode.find((node) => node.id === item.workLifeId)?.name
                  }}</span>
                </span>
              </div>
            </div>
            <div class="border-b px-10px py-10px one-row-ellipsis">
              <span>期望国家：</span>
              <CountryIcon :countryId="item.countryId" />
            </div>
            <div class="flex justify-between px-10px py-10px">
              <span class="text-blue">{{ item.jobName }}</span>
              <span class="text-price_red"
                >{{ formatPrice(item.salaryMin) }}-{{ formatPrice(item.salaryMax)
                }}{{ getCurrency(item.currency)?.name }}</span
              >
            </div>
            <div class="flex flex-center bg-gradient-to-r from-[#ffc3c0] to-white px-10px py-10px">
              <div class="border bg-white p-10px rounded-5px text-14px">查看并翻译</div>
            </div>
          </div>
          <el-empty :description="'暂无查询数据'" v-if="vitaList.length == 0" />
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-drawer
      v-model="drawer"
      title="筛选"
      :direction="'btt'"
      :before-close="handleClose"
      size="60%"
    >
      <div class="px-20px">
        <div class="text-16px font-bold mt-10px mb-20px">按国家筛选</div>
        <div class="flex flex-wrap mt-10px">
          <div
            v-for="item in countryList"
            :key="item.id"
            class="mr-10px mb-10px relative box-border"
            :class="params.countryId === item.id ? 'border border-success' : ''"
            @click="seleteCountry(item.id)"
          >
            <SvgIcon
              name="ep:success-filled"
              class="absolute -right-5px -top-5px text-success"
              v-show="params.countryId === item.id"
            />
            <CountryIcon :countryId="item.id" />
          </div>
        </div>
        <div class="text-16px font-bold my-20px">按行业筛选</div>
        <div class="flex flex-wrap mt-10px">
          <div
            class="p-5px rounded-5px border mr-10px mb-10px relative"
            :class="params.categoryId === item.id ? 'border border-success text-success' : ''"
            v-for="item in categoryList"
            :key="item.id"
            @click="params.categoryId = item.id"
          >
            <SvgIcon
              name="ep:success-filled"
              class="absolute -right-5px -top-5px text-success"
              v-show="params.categoryId === item.id"
            />
            {{ item.name }}
          </div>
        </div>
      </div>
      <template #footer>
        <div class="absolute bottom-0px left-0px w-full flex flex-center bg-white h-40px py-10px">
          <div
            class="w-3/10 border py-5px flex flex-center mr-20px rounded-5px"
            @click="drawer = false"
          >
            取消
          </div>
          <div
            class="w-3/10 border bg-primary text-white flex flex-center py-5px rounded-5px"
            @click="changeFilter"
          >
            已完成
          </div>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SvgIcon from '@/components/Icon.vue'
import CountryIcon from '@/components/countryIcon.vue'
import { getTalentCompanyAndJob, getPersonList } from '@/api/talent'
import { formatShortDate } from '@/utils/data'
import { formatPrice, getCurrency } from '@/utils/price'
import { useConfigStore } from '@/stores/config'
import { getWorkCategoryTree } from '@/utils/index'
import { reactive } from 'vue'
import { onActivated } from 'vue'
import { inject } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const config = useConfigStore()
const drawer = ref(false)
const activeName = ref('job')
const jobList = ref([])
const vitaList = ref([])
const countryList = ref([])
const categoryList = ref([])
const jobLoading = ref(false)
const vitaLoading = ref(false)
const backToTop = inject('toTop')
const params = reactive({
  countryId: null,
  categoryId: null,
})

const jobPage = reactive({
  current: 1,
  size: 9,
})

const vitaPage = reactive({
  current: 1,
  size: 9,
})

const toPath = (path) => {
  backToTop()
  router.push(path)
}

const init = () => {
  jobLoading.value = true
  getTalentCompanyAndJob({
    category1Id: params.categoryId,
    current: jobPage.current,
    size: jobPage.size,
    countryId: params.countryId,
  })
    .then((res) => {
      if (res.code === 20000) {
        jobList.value.push(...res.data.records)
      }
    })
    .finally(() => {
      jobLoading.value = false
    })
  getPersonList({
    countryId: params.countryId,
    current: vitaPage.current,
    size: vitaPage.size,
    workCategoryId: params.categoryId,
  })
    .then((res) => {
      if (res.code === 20000) {
        vitaList.value.push(...res.data.records)
      }
    })
    .finally(() => {
      vitaLoading.value = false
    })
}

const initFilter = async () => {
  countryList.value = await config.initCountryList()

  let res = await getWorkCategoryTree()
  categoryList.value = [
    {
      id: null,
      name: '全部工种',
    },
    ...res,
  ]
}

const onNav = (path) => {
  window.open('https://www.rcep.cn' + path, '_blank')
}

const seleteCountry = (id) => {
  if (params.countryId === id) params.countryId = null
  else params.countryId = id
}

const changeFilter = () => {
  jobPage.current = 1
  vitaPage.current = 1
  jobList.value = []
  vitaList.value = []
  drawer.value = false
  init()
}

init()

initFilter()

onActivated(() => {
  init()

  initFilter()
})
</script>

<style lang="scss" scoped>
.bg-contact {
  background-image: url('@/assets/image/bg_daili.png');
}
:deep .el-tabs__active-bar {
  background-color: var(--color-primary-hex);
}
:deep .el-tabs__item.is-active,
:deep .el-tabs__item:hover {
  color: var(--color-primary-hex);
}

// :deep .el-tabs__item.is-active {
//   font-size: 20px;
//   font-weight: 700;
// }

:deep .el-tabs__nav-wrap:after {
  background-color: transparent;
}

:deep .el-drawer__header {
  background: #fff;
  padding-left: 20px;
}
</style>
